<template>
  <div class="question">
    <!-- 主体部分 -->
    <div class="list">
      <!-- 顶部按钮部分 -->
      <div class="topBtn">
        <!-- 左侧新建、刷新、上传、下载按钮部分 -->
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="create">新建</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="fresh">全量刷新</el-button>
        <div class="upload-demo">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange"
            :show-file-list="status">
            <el-button type="primary" size="mini">文件上传<i class="el-icon-upload2"></i></el-button>
          </el-upload>
        </div>
        <div class="down-demo">
          <el-button type="primary" size="mini" @click="download">文件下载<i class="el-icon-download"></i></el-button>
        </div>
        <div class="right-btn">
          <!-- 右侧搜索、检索按钮部分 -->
          <el-input size="mini" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input" style="width:200px">
          </el-input>
          <el-button type="primary" size="mini" v-model="input.value">查询</el-button>
          <el-button type="info" icon="el-icon-caret-bottom" size="mini" @click="searchHeig"></el-button>
        </div>
      </div>
      <!-- 表格部分 -->
      <div style="height:730px;overflow-y: auto">
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
          style="width: 100%;">
          <el-table-column fixed type="index" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column prop="questionName" label="题干" width="350" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="questionParse" label="解析" width="200" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="questionScore" label="分数" align="center">
          </el-table-column>
          <el-table-column prop="questionCreator" label="创建人" align="center">
          </el-table-column>
          <el-table-column prop="questionLevel" label="难度" align="center">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" align="center">
          </el-table-column>
          <el-table-column prop="questionCategory" label="学科" align="center">
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="250" align="center">
          </el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <!-- 详情按钮 -->
              <el-button type="success" size="mini" @click="detailVisible = true">详情</el-button>
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.$index, scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器部分 -->
      <div style="text-align:right;margin-top:20px;">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
          :page-size="pageSize" :page-sizes="[5, 10, 15]" :current-page="currentPage" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" @prev-click="upChange" @next-click="nextChange">
        </el-pagination>
      </div>
    </div>

    <!-- 点击创建按钮弹出弹框部分 -->
    <div class="confirmBtn">
      <el-dialog title="创建问题" :visible.sync="createVisible" width="53%" :before-close="handleClose">
        <div>
          <el-steps :active="active" finish-status="success">
            <el-step title="问题内容"></el-step>
            <el-step title="问题分类"></el-step>
            <el-step title="问题选项"></el-step>
          </el-steps>
          <!-- 问题内容部分 -->
          <!-- 富文本编辑器部分 -->
          <div v-if="active === 0">
            <el-form :model="form" :rules="rules" ref="form1">
              <el-form-item label="题干:" prop="questionName" label-width="60px">
                <quill-editor v-model="form.questionName" style="width:860px;margin-top: 15px;" />
              </el-form-item>
              <div style="margin-top:20px">
                <el-form-item label="解析:" prop="questionParse" label-width="60px">
                  <quill-editor v-model="form.questionParse" style="width:860px;margin-top: 10px;" />
                </el-form-item>
              </div>
            </el-form>
            <div class="prev">
              <el-button style="margin-left: 750px;" @click="cancel">取消</el-button>
              <el-button style="margin-right: 10px;" @click="next1">下一步</el-button>
            </div>
          </div>
          <!-- 问题分类部分 -->
          <div v-if="active === 1">
            <el-form :model="form" ref="form2" :rules="rules" label-width="100px">
              <el-form-item label="题干:" prop="questionName"><span v-html="form.questionName"></span></el-form-item>
              <el-form-item label="题型" prop="questionType">
                <el-select v-model="form.questionType" placeholder="多选题">
                  <el-option label="单选题" value="单选题"></el-option>
                  <el-option label="多选题" value="多选题"></el-option>
                  <el-option label="判断题" value="判断题"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="归类" prop="questionCategory">
                <el-select v-model="form.questionCategory" placeholder="Java基础">
                  <el-option label="Java基础" value="Java基础"></el-option>
                  <el-option label="Web基础" value="Web基础"></el-option>
                  <el-option label="数据基础" value="数据基础"></el-option>
                  <el-option label="Java进阶" value="Java进阶"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度" prop="questionLevel">
                <el-select v-model="form.questionLevel" placeholder="难">
                  <el-option label="难" value="难"></el-option>
                  <el-option label="中等" value="中等"></el-option>
                  <el-option label="易" value="易"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="prev">
              <el-button style="margin-top: 50px;margin-left: 70px;" @click="prev1">上一步</el-button>
              <el-button style="margin-top: 70px;margin-left: 600px;" @click="cancel">取消</el-button>
              <el-button style="margin-top: 70px;margin-right: 10px;" @click="next2">下一步</el-button>
            </div>
          </div>
          <!-- 新建部分的问题选项部分 -->
          <div v-if="active === 2">
            <el-form :model="form" :rules="rules" ref="form3" label-width="100px">
              <el-form-item label="题目:" prop="questionName"><span v-html="form.questionName"></span></el-form-item>
              <!-- 正确答案部分 -->
              <el-form-item label="正确答案:" prop="questionOption" label-width="100px"></el-form-item>
              <!-- 选项部分 -->
              <!-- 单选题 -->
              <el-form-item label="单选题:" prop="answer" label-width="100px" v-if="form.questionType === '单选题'">
                <el-radio-group v-model="form.answer">
                  <el-radio :label="items.value" v-for="items in form.option" :key="items.value">
                    {{ items.value }}:<el-input v-model="items.input"></el-input>
                  </el-radio><br>
                  <el-radio :label="items.value" v-for="items in form.option" :key="items.value">
                    {{ items.value }}:<el-input v-model="items.input"></el-input>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 多选题 -->
              <el-form-item label="多选题:" prop="answer" label-width="100px" v-if="form.questionType === '多选题'">
                <el-checkbox-group v-model="form.answer">
                  <el-checkbox :label="items.value" v-for="items in form.option" :key="items.value">
                    {{ items.value }}:<el-input v-model="items.input"></el-input>
                  </el-checkbox><br>
                  <el-checkbox :label="items.value" v-for="items in form.option" :key="items.value">
                    {{ items.value }}:<el-input v-model="items.input"></el-input>
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <!-- 判断题 -->
              <el-form-item label="判断题:" prop="answer" label-width="100px" v-if="form.questionType === '判断题'">
                <el-radio v-model="form.answer" label="1">正确</el-radio><br>
                <el-radio v-model="form.answer" label="2">错误</el-radio>
              </el-form-item>
            </el-form>
            <div class="prev">
              <el-button style="margin-top: 50px;margin-left: 70px;" @click="prev2">上一步</el-button>
              <el-button style="margin-top: 70px;margin-left: 600px;" @click="cancel">取消</el-button>
              <el-button @click="detailFinsh" type="primary">完成</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 点击右侧按钮弹出高级检索框部分 -->
    <el-dialog title="Advanced search" :visible.sync="searchVisible" width="25%" :before-close="handleClose">
      <hr>
      <el-form ref="form" :model="form" label-width="120px" label-position="left" size="mini">
        <el-form-item label="题干" style="margin-top:10px;">
          <el-input v-model="form.questionName" style="width:300px;" placeholder="题干"></el-input>
        </el-form-item>
        <el-form-item label="创建人" style="margin-top:10px;">
          <el-input v-model="form.questionCreator" style="width:300px;" placeholder="创建人"></el-input>
        </el-form-item>
        <el-form-item label="难度" style="margin-top:10px;">
          <el-input v-model="form.questionLevel" style="width:300px;" placeholder="难度"></el-input>
        </el-form-item>
        <el-form-item label="题型" style="margin-top:10px;">
          <el-input v-model="form.questionType" style="width:300px;" placeholder="题型"></el-input>
        </el-form-item>
        <el-form-item label="学科" style="margin-top:10px;">
          <el-input v-model="form.questionCategory" style="width:300px;" placeholder="学科"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:120px;margin-top:10px;">
          <el-button type="primary" @click="submitForm('form')">检索</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 点击详情按钮弹出题目信息弹框 -->
    <el-dialog title="题目信息" :visible.sync="detailVisible">
      <el-form v-model="form">
        <hr>
        <el-form-item label="题干：" :label-width="formLabelWidth"><br>
          <div v-html="form.questionName"></div>
        </el-form-item>
        <el-form-item label="选项：" :label-width="formLabelWidth"><br>
          <div>
            <ul>
              <li>这是第一个选项</li>
              <li>这是第二个选项</li>
              <li>这是第三个选项</li>
              <li>这是第四个选项</li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item label="答案：" :label-width="formLabelWidth"><br>
          <div>
            <ul>
              <li>这是第一个选项</li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item label="解析：" :label-width="formLabelWidth"><br>
          <div v-html="form.questionParse"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 点击编辑按钮弹出编辑信息弹框 -->
    <el-dialog title="编辑题目" :visible.sync="editVisible" width="50%" :before-close="handleClose">
      <hr>
      <el-form v-model="form" label-width="50px">
        <el-form-item label="题干:" prop="questionName">
          <quill-editor label="内容：" v-model="form.questionName"
            style="width:840px; margin-left: 20px; margin-top: 15px;">
          </quill-editor>
        </el-form-item>
        <ul style="margin-left:70px;margin-top: 20px; width: 840px;">
          <li>
            <el-input v-model="form" placeholder="正确"></el-input>
          </li>
          <li>
            <el-input v-model="form" placeholder="错误"></el-input>
          </li>
        </ul>
        <div style="margin-left: 5px;line-height: 30px;">答案:</div>
        <ul style="margin-left:70px;margin-top: 5px; width: 840px;">
          <li>
            <el-input v-model="form" placeholder="正确"></el-input>
          </li>
        </ul>
        <el-form-item label="解析:" prop="questionParse">
          <quill-editor label="内容：" v-model="form.questionParse"
            style="width:840px; margin-left: 20px; margin-top: 15px;">
          </quill-editor>
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px; margin-left: 760px;">
        <el-button @click="onSubmit" type="primary">确定</el-button>
        <el-button @click="editVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
export default {
  name: "Question",
  components: {
    quillEditor,
  },
  methods: {
    handleClick(value) {
      console.log(value);
    },
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    handleClose(done) {//对话框：点击X关闭页面友情提示信息
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          let form = {
            questionName: '',
            questionParse: '',
            questionType: '',
            questionCategory: '',
            questionLevel: '',
            questionOption: '',
            questionAnswerOption: '',
          }
          this.form = form;
          this.active = 0;
        })
        .catch(_ => { });
    },
    //新建点击方法
    create() {
      this.createVisible = true;
    },
    // 全量刷新
    fresh() {
      this.$router.go(0);
    },
    // 点击文件下载按钮提示信息
    download() {
      this.$confirm('是否要下载此文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '下载成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        });
      });
    },
    //高级检索点击方法
    searchHeig() {
      this.searchVisible = true;
    },
    // 详情操作
    detail() {
      this.detailVisible = true;
    },
    // 编辑操作
    edit() {
      this.editVisible = true;
    },
    // 编辑操作中的完成按钮
    onSubmit() {
      this.editVisible = false;
    },
    // 操作中的删除操作
    del(id) {
      console.log(id);
      this.$confirm("确定要删除此条信息吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tableData = this.tableData.filter((index) => index.questionId != questionId + 1);
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      })
    },
    // 检索提交部分
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
          this.searchVisible = false;
        } else {
          console.log('提交错误!!');
          return false;
        }
      });
    },
    // 分页部分
    // 改变每页显示的数据
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.pageSize = val
      this.currentPage = 1
    },
    // 更改页码
    handleCurrentChange(val) {
      console.log(`当前页${val}条`);
      this.currentPage = val
    },
    // 上一页
    upChange(val) {
      console.log(val);
      this.currentPage -= 1;
    },
    // 下一页
    nextChange(val) {
      this.currentPage += 1;
    },
    // 新建部分的上一步、取消、下一步
    // 上一步
    prev1() {
      this.active = this.active - 1;
    },
    prev2() {
      this.active = this.active - 1;
    },
    // 取消
    cancel() {
      let form = {
        questionName: '',
        questionParse: '',
        questionType: '',
        questionCategory: '',
        questionLevel: '',
        questionOption: '',
        questionAnswerOption: '',
      }
      this.form = form;
      this.createVisible = false
      this.active = 0;
    },
    // 下一步
    next1() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          if (this.active++ > 2) this.active = 0;
        }
      })
    },
    next2() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          if (this.active++ > 2) this.active = 0;
        }
      })
    },
    detailFinsh() {
      this.$refs.form3.validate((valid) => {
        if (valid) {
          if (this.active++ > 2) this.active = 0;
          this.form.questionId = this.tableData.length + 1
          this.form.updateTime = this.time()
          this.form.questionScore = '4'
          this.form.questionCreator = 'xiaoniu'
          this.tableData.push(this.form)
          let form = {
            questionName: '',
            questionParse: '',
            questionType: '',
            questionCategory: '',
            questionLevel: '',
            questionOption: [
              {
                value: 'A',
                input: '',
              }],
            questionAnswerOption: []
          }
          this.form = form;
          this.createVisible = false;
          alert('创建成功!');

        } else {
          console.log('创建失败');
          return false;
        }
      });
    },
    time() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day2 = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();

      if (hour < 10) {
        hour = '0' + hour;
      }
      if (minute < 10) {
        minute = '0' + minute;
      }
      if (second < 10) {
        second = '0' + second;
      }
      var times1 = year + '-' + month + '-' + day2 + ' ' + hour + ':' + minute + ':' + second;
      return times1
    },
    // 获取数据和条件查询
    getTableData() {
      this.$api.question.getTableData().then((res) => {
        console.log(res);
        // if (res.status == 200) {
        //   console.log(this.tableData);
        //   this.tableData.push(res.data.data)
        // }
      });
    },
  },

  created() {
    console.log(this.$api);
    this.getTableData();
  },
  mounted() {
    // 将获取数据渲染到页面
    this.$api.question.getTableData().then((res) => {
      console.log(res.data);
      if(res.data.code == 200){
        console.log(res);
        this.tableData = res.data.data;
        console.log((res.data.data));
      }else{
        console.log("111");
      }
    });
  },

  data() {
    return {
      input: '',
      createVisible: false,//创建按钮的对话弹框默认不显示
      searchVisible: false,//高级检索弹框
      detailVisible: false,//详情弹框
      editVisible: false,//编辑弹框
      formLabelWidth: '120px',
      status: false,//上传文件按钮是否显示上传列表
      // 分页部分数据
      pageSize: 10,//显示的数据条数
      currentPage: 1,//当前页开始的页数
      total: 50,//总条数
      // 详情部分
      taskDetailList: [],
      // 创建部分
      active: 0,
      active1: 1,
      // formOne: {
      //   option: "",
      //   answer: "",
      // },
      opt: [],
      form: {
        questionId: '',
        questionName: '',
        questionParse: '',
        questionScore: '',
        questionCreator: '',
        questionLevel: '',
        questionType: '',
        questionCategory: '',
        updateTime: '',
        do: '',//操作
        questionOption: [{
          value: 'A',
          input: '',
        }],
        questionAnswerOption: [{}],
      },
      // editorOption: {
      //   modules: {
      //     toolbar: [//富文本编辑器工具部分
      //       [
      //         "bold",
      //         "italic",
      //         "underline",
      //         "image",
      //       ], // toggled buttons  
      //       [{ 'align': [] }],    //对齐方式
      //       [{ 'font': [] }],     //字体 
      //       [{ 'size': ['small', 'normal', 'large', 'huge'] }],
      //       [{ 'color': [] }],     // 字体颜色，字体背景颜色 
      //     ],
      //   },
      //   placeholder: '请输入内容',
      // },
      rules: {
        questionName: [
          { required: true, message: '请输入题干', trigger: 'change' },
          { min: 2, max: 100, message: "长度在 2 到 100 个字符", },
        ],
        questionParse: [
          { required: true, message: '请输入解析', trigger: 'change' },
          { min: 2, max: 200, message: "长度在 2 到 200 个字符", },
        ],
        questionType: [{ required: true, message: "请选择归类", trigger: "change" }],
        questionCategory: [{ required: true, message: "请选择归类", trigger: "change" }],
        questionLevel: [{ required: true, message: "请选择难度", trigger: "change" }],
        questionOption: [{ required: true, message: "请创建选项", trigger: "change" }],
        questionAnswerOption: [{ required: true, message: "请选择答案", trigger: "change", }],
      },
      // tableData: [{//表格数据部分
      //   questionId: '1',
      //   questionName: '中括号和点语法的区别',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '简单',
      //   questionType: '多选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '2',
      //   questionName: 'getElementByTagName()和querySelectAll()的区别',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '中等',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '3',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '4',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '5',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '6',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '7',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '8',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '9',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '10',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '11',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '12',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // },
      // {
      //   questionId: '13',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // },
      // {
      //   questionId: '14',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // }, {
      //   questionId: '15',
      //   questionName: 'html',
      //   questionParse: '解析',
      //   questionScore: '5',
      //   questionCreator: 'admin',
      //   questionLevel: '难',
      //   questionType: '单选题',
      //   questionCategory: '前端学科',
      //   updateTime: '2022-10-11 19:25:35',
      // },
      // ]
      tableData: [],
    }
  }
};
</script>

<style lang="less" scoped>
// 列表部分修饰
.list {
  width: 90%;
  height: 840px;
  background-color: #fff;
  margin: 20px auto;

  // 顶部按钮部分修饰
  .topBtn {
    padding: 10px 0px 10px 10px;

    .upload-demo {
      margin-top: -27px;
      margin-left: 190px;
      width: 100px;
    }

    .down-demo {
      margin-top: -27px;
      margin-left: 290px;
      width: 100px;
    }

    .right-btn {
      float: right;
      margin-right: 10px;
      margin-top: -27px;
    }
  }

  // .el-form-item__label{
  //   padding-top: 20px;
  // }
}
</style>